<template>
    <!-- 参赛人员列表 -->
    <div
        class="right-top-box"
        :class="customClass">
        <group-card
            :title="title"
            :type="type"
            :useSearch="useSearch"
            :placeholder="placeholder"
            v-model:searchVal="newSearchVal"
            @triggerSearch="hanldeSearch">
            <div class="participants-inner">
                <div class="right-bottom-box-head">
                    <div class="col">姓名</div>
                    <div class="col">证件标识</div>
                    <div class="col col-timer">通行时间</div>
                    <div class="col">通行点位</div>
                </div>
                <div class="right-bottom-box-view">
                    <div class="marquee">
                        <div
                            class="row"
                            v-for="item in entryPersonList"
                            :key="item.id"
                            @click="handleShowPop(item)"
                            :class="{
                              'right-bottom-row-err': item.statusCode == 3,
                            }">
                            <span class="col name-text">{{ item.name }}</span>
                            <span class="col">{{ item.type }}</span>
                            <span class="col col-timer">{{ item.regTime }}</span>
                            <span class="col">{{ item.remark }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </group-card>
    </div>
</template>

<script setup name="participantsList">
// import { DateFormat } from '@/utils';
const props = defineProps({
  entryPersonList: {
    type: Array,
    default: () => [],
  },
  type: {
    type: String,
    default: 'right'
  },
  customClass: String,
  title: {
    type: String,
  },
  useSearch: {
    type: Boolean,
    default: false,
  },
  placeholder: String,
  searchVal: String
});
const emits = defineEmits(['triggerSearch', 'update:searchVal', 'showUserDetailPop'])

const newSearchVal = computed({
  get() {
    return props.searchVal
  },
  set(val) {
    emits('update:searchVal', val)
  }
})

const hanldeSearch = () => {
  emits('triggerSearch')
}

const handleShowPop = (item) => {
  emits('showUserDetailPop', item)
}
</script>

<style lang="scss" scoped>
.right-top-box {
  height: 250px;
  &.entry-list {
    height: 310px;
  }
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  .participants-inner {
    margin-top: 7px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .right-bottom-box-head {
      height: 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 1);
      padding: 0 10px;
      box-sizing: border-box;
    }
    .right-bottom-box-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .marquee {
        flex: 1;
        display: flex;
        flex-direction: column;
        .row {
          transition: all 0.1s ease-in;
          user-select: none;
          color: #ffffff;
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10px;
          transition: all 0.1s ease-in;
          .right-bottom-ready {
            color: #30ac68;
          }
          .right-bottom-onWay {
            color: #fff;
          }

          .right-bottom-arrive {
            color: #007fff;
          }
          .right-bottom-err {
            color: #ff6767;
          }
          &:hover {
            background: linear-gradient(
              90deg,
              #ccaddc 0%,
              rgba(109, 93, 118, 0.7) 100%
            );
            color: #ffffff;
          }
        }
        .right-bottom-row-err {
          background-color: #ff616130 !important;
          color: #ffffff;
        }
      }
    }
    .name-text {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .col:first-child {
      width: 60px;
    }
    .col:nth-child(2) {
      width: 100px;
    }
    .col-timer {
      flex: 1;
    }
    .col:last-child {
      width: 110px;
    }
  }
}
</style>
